<!--
 * @Author: wangshuguang
 * @Date: 2022-02-17 10:49:37
 * @LastEditTime: 2022-08-24 15:43:00
 * @LastEditors: wangshuguang
 * @Description:  收入记录
-->
<template>
	<div class="common-container">
		<!-- 筛选条件 -->
		<el-card>
			<el-form ref="filterForm" :model="listQuery" class="demo-form-inline" label-width="100px">
				<el-row>
					<el-col :span="24" prop="date">
						<el-form-item label="时间">
							<el-radio-group v-model="filterDate" size="small" @change="dataRadioChange">
								<el-radio-button :label="1">今天</el-radio-button>
								<el-radio-button :label="2">昨天</el-radio-button>
								<el-radio-button :label="7">近7天</el-radio-button>
								<el-radio-button :label="15">近15天</el-radio-button>
								<el-radio-button :label="30">近30天</el-radio-button>
								<el-radio-button label="nowMonth">本月</el-radio-button>
							</el-radio-group>&nbsp;
							<el-date-picker v-model="filterTime" :clearable="false" format="yyyy-MM-dd HH:mm:ss"
								value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" size="small"
								type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
								@change="pickerChange" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="支付方式" prop="payType">
							<el-select v-model="listQuery.payType" clearable placeholder="请选择" size="small"
								class="width100">
								<el-option label="全部" value="" />
								<el-option label="微信" value="1" />
								<el-option label="余额" value="2" />
								<el-option label="支付宝" value="3" />
								<el-option label="银联" value="4" />
								<el-option label="现金" value="5" />
								<el-option label="花呗" value="6" />
								<el-option label="云闪付" value="7" />
								<el-option label="礼品卡" value="9" />
								<el-option label="其他" value="99" />
							</el-select>
						</el-form-item>
					</el-col>

					<div v-show="showMoreFilter">
						<el-col :span="12">
							<el-form-item label="支付状态" prop="payStatus">
								<el-select v-model="listQuery.payStatus" clearable placeholder="请选择" size="small"
									class="width100">
									<el-option label="全部" value="" />
									<el-option label="支付成功" value="100" />
									<el-option label="待支付" value="101" />
									<el-option label="支付中" value="102" />
									<el-option label="支付失败" value="104" />
									<!-- <el-option label="主动取消" value="105" /> -->
									<el-option label="退款成功" value="200" />
									<el-option label="退款中" value="201" />
									<el-option label="退款失败" value="202" />
									<el-option label="部分退款" value="205" />
									<el-option label="待结算" value="300" />
									<el-option label="结算中" value="301" />
									<el-option label="结算成功" value="302" />
									<el-option label="结算失败" value="303" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="支付门店" prop="shopId">
								<el-select v-model="listQuery.shopId" filterable size="small" class="width100"
									placeholder="可通过名称搜索" style="width:300px">
									<el-option v-for="(item, index) in $store.state.user.allManageShopFilterOptions"
										:key="index" :label="item.name" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="业务类型" prop="type">
								<el-select v-model="listQuery.type" clearable placeholder="请选择" size="small"
									class="width100">
									<el-option label="全部" value="" />
									<el-option label="会员充值" value="2" />
									<el-option label="会员开卡" value="34" />
									<el-option label="商城" value="5" />
									<el-option label="点餐" value="6" />
									<el-option label="预订" value="7" />
									<el-option label="赠送会员" value="9" />
									<el-option label="会员续费" value="10" />
									<el-option label="码牌支付" value="14" />
									<el-option label="收款" value="15" />
									<el-option label="插件返佣" value="16" />
									<el-option label="预约" value="17" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="业务来源" prop="source">
								<el-select v-model="listQuery.source" clearable placeholder="请选择" size="small"
									class="width100">
									<el-option label="全部" value="" />
									<el-option label="微信会员小程序" value="1" />
									<el-option label="聚合支付" value="9" />
									<el-option label="商户app" value="10" />
									<el-option label="POS机app" value="4" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="使用插件" prop="pluginCode">
								<el-select v-model="listQuery.pluginCode" clearable placeholder="请选择" size="small"
									class="width100">
									<el-option label="全部" value="" />
									<el-option label="未使用插件" value="0" />
									<el-option label="超级会员" value="supermember" />
									<el-option label="储值AI" value="2" />
									<el-option label="满减满折" value="discount" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="金额区间" prop="beginAmt">
								<el-input v-model="listQuery.beginAmt" placeholder="最低价" type="number"
									style="width:100px" :controls="false" size="small" />
								<span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
								<el-input v-model="listQuery.endAmt" placeholder="最高价" type="number" style="width:100px"
									:controls="false" size="small" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="支付单号" prop="paymentNo">
								<el-input v-model="listQuery.paymentNo" clearable placeholder="请输入" size="small"
									class="width100" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="业务单号" prop="orderNo">
								<el-input v-model="listQuery.orderNo" clearable placeholder="请输入" size="small"
									class="width100" />
							</el-form-item>
						</el-col>
					</div>
					<el-col :span="12">
						<el-form-item>
							<el-button type="primary" round size="small" @click="fetchData">查询</el-button>
							<el-button type="primary" round size="small" @click="resetForm('filterForm')">重置</el-button>
							<el-button type="text" round size="small" @click="showMoreFilter = !showMoreFilter">
								{{ showMoreFilter ? '收起高级选项' : '展开高级选项' }}</el-button>
							<el-button type="text" round size="small" @click="downFile">导出为excel</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<!-- 数据看板 -->
		<div class="dataCard">
			<el-card>
				<div class="title">订单金额和笔数</div>
				<div class="money">{{ dataCard.totAmt }}元</div>
				<div class="money">{{ dataCard.totNum }}笔</div>
			</el-card>
			<el-card>
				<div class="title">退款金额和笔数</div>
				<div class="money">{{ dataCard.refundAmt }}元</div>
				<div class="money">{{ dataCard.refundNum }}笔</div>
			</el-card>
			<el-card>
				<div class="title">实收金额
					<el-tooltip class="item" effect="light" content="实收金额包括礼品卡、余额、线上交易" placement="right">
						<i class="el-icon-question" style="color:#ffb72f" />
					</el-tooltip>
				</div>
				<div class="money">{{ dataCard.realAmt }}元</div>
				<div class="content">
					<div>礼品卡支付 {{ dataCard.giftCardAmt||0 }} 元</div>
					<div style="margin:5px 0;">余额支付 {{ dataCard.balanceAmt }} 元</div>
					<div>线上交易 {{ dataCard.onlineAmt }} 元</div>
				</div>
			</el-card>
		</div>
		<div class="dataList">
			<el-table size="medium" :data="list" border>
				<el-table-column prop="roleTypeZh" align="center" label="序号">
					<template slot-scope="scope">{{ scope.$index + 1 }}</template>
				</el-table-column>
				<el-table-column prop="paymentMethodZh" align="center" label="支付方式"/>
				<el-table-column prop="paymentNo" align="center" label="支付单号" />
				<el-table-column prop="typeZh" align="center" label="业务类型" />
				<el-table-column prop="sourceZh" align="center" label="业务来源" />
				<el-table-column prop="orderNo" align="center" label="业务单号" />
				<!-- 交易中心进入时  展示会员信息 -->
				<el-table-column v-if="sourcePage == 'payCenter'" prop="memberInfo" align="center" label="会员信息" />
				<el-table-column v-else prop="shopName" align="center" label="支付门店" />
				<el-table-column prop="pluginCodeZh" align="center" label="使用插件" />
				<el-table-column prop="totalFee" align="center" label="订单金额/元" />
				<el-table-column prop="refundAmt" align="center" label="退款金额/元" />
				<el-table-column prop="realAmt" align="center" label="实收金额/元" />
				<el-table-column prop="paymentStatusZh" align="center" label="支付状态" />
				<el-table-column prop="paymentTime" align="center" label="发起支付时间" />
				<el-table-column prop="remark" align="center" label="备注" width="200" />
				<el-table-column prop="statisticalTime" align="center" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="viewData(scope.row)">详情</el-button>
						<!-- 退款按钮展示条件： 会员详情页面 & 支付状态不是【待支付】 & 业务类型为【商城，预定】 && 可退款有值 -->
						<el-button
							v-if="sourcePage == 'vipDetail' && [100,205].includes(scope.row.paymentStatus) && [5,7, 6,14,15,17].includes(scope.row.type) && scope.row.canRefAmt"
							type="text" @click="refundOrder(scope.row)">退款</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination-container">
				<el-pagination :current-page.sync="listQuery.pageNum" :page-size="listQuery.pageSize" :total="total"
					layout="total, prev, pager, next" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
		</div>

    <!-- 退款弹框 -->
    <RefundDialog v-model="refundVisible" :info-config="infoConfig" @sucClose="sucClose" />
    <!-- 详情弹框 -->
    <el-dialog
      title="支付订单详情"
      :visible.sync="orderDetailVisible"
      width="70%"
      :before-close="handleClose"
    >
      <IncomeHisDetail v-if="orderDetailVisible" :info-config="infoConfig" @sucClose="sucClose" />
    </el-dialog>
  </div>
</template>

<script>
	import {
		qryIncomeRecord,
		exportMercIncome
	} from '@/api/payCenter'
	import {
		mapGetters
	} from 'vuex'
	import {
		dateFtt,
		removePropertyOfNull
	} from '@/utils'
	import {
		getFilterFormPastTime
	} from '@/utils/format'

	import IncomeHisDetail from '../components/IncomeHisDetail.vue'
	import RefundDialog from '../components/RefundDialog.vue'

	export default {
		components: {
			IncomeHisDetail,
			RefundDialog
		},
		props: {
			vipDetail: {},
			// sourcePage来源页面  交易中心-payCenter  会员详情-vipDetail
			sourcePage: {
				default: 'payCenter'
			}
		},
		data() {
			return {
				orderDetailVisible: false,
				showMoreFilter: false,
				infoVisible: false,
				refundVisible: false,
				infoConfig: {},
				form: {},
				dataCard: {},
				scope: 0,
				total: 0,
				filterDate: 1,
				filterTime: [],
				listQuery: {
					pageNum: 1,
					pageSize: 10,
					payType: '',
					payStatus: '',
					paymentNo: '',
					pluginCode: '',
					orderNo: '',
					type: '',
					shopId: '',
					beginAmt: '',
					source: '',
					endAmt: '',
					beginTime: '',
					endTime: ''
				},
				list: []
			}
		},
		computed: {
			...mapGetters(['businessInfo','userInfo'])
		},
		async mounted() {
			// 设置时间查询默认值
			let filtrList = ['cancelTable', 'invoice']
			let {
				query
			} = this.$route
			if (query?.orderNo && filtrList.indexOf(query?.from) != -1) {
				qryIncomeRecord({
					orderNo: query.orderNo
				}).then(res => {
					if (res.code === 0) {
						const {
							list,
							total
						} = res.data.pageList
						this.infoConfig = list[0]
						this.orderDetailVisible = true
					}
				})
				return
			}
			this.filterDate = 1
			this.dataRadioChange(1)
			console.log('vipDetail', this.vipDetail)

			const arrFrom = ['invoice']
			this.$route.query.orderNo && arrFrom.indexOf(this.$route.query.from) > -1 && this.viewData({
				orderNo: this.$route.query.orderNo
			})
		},
		methods: {
			handleClose() {
				const queryFrom = ['invoice']
				if (queryFrom.indexOf(this.$route.query.from) > -1 && this.$route.query.orderNo) return window.close()
				this.sucClose()
			},
			refundOrder(item) {
				this.infoConfig = item
				this.refundVisible = true
			},
			sucClose() {
				this.orderDetailVisible = false
				this.refundVisible = false
				this.fetchData()
			},
			viewData(data) {
				this.infoConfig = data
				this.orderDetailVisible = true
			},
			pickerChange(val) {
				// 时间筛选条件切换
				console.log('pickerChange', val)
				this.listQuery.beginTime = val[0]
				this.listQuery.endTime = val[1]
				this.filterDate = ''
				this.fetchData()
			},
			async dataRadioChange(val) {
				// 时间tab切换
				let dateArr = []
				if (val == 'nowMonth') {
					dateArr = await getFilterFormPastTime('nowMonth')
				} else if (val == 2) {
					dateArr = await getFilterFormPastTime('yesterday')
				} else {
					dateArr = await getFilterFormPastTime(val)
				}
				this.listQuery.beginTime = dateArr[0]
				this.listQuery.endTime = dateArr[1]
				console.log('val', val, dateArr)
				this.filterTime = []
				this.fetchData()
			},
			// 重置
			resetForm(formName) {
				this.filterDate = 1
				this.listQuery.endAmt = ''
				this.listQuery.beginAmt = ''
				this.$refs[formName].resetFields()
				this.dataRadioChange(1)
			},
			downFile() {
				let { isAdmin, shopId } = this.userInfo;
				const obj = {
					...this.listQuery,
					shopId: !isAdmin && !this.listQuery.shopId ? shopId : this.listQuery.shopId,
					memberId: this.$route.query.memberId || ''
				};
				exportMercIncome(removePropertyOfNull(obj)).then(res => {
					console.log('res', res)
					if (res.code === 0) {
						this.$alert(
							'数据导出中，请稍后到数据下载中心进行下载',
							'提示', {
								confirmButtonText: '确定',
								center: true,
								type: 'success',
								callback: action => {}
							}
						)
					}
				})
			},
			fetchData() {
				let { isAdmin, shopId } = this.userInfo;
				const obj = {
					...this.listQuery,
					shopId: !isAdmin && !this.listQuery.shopId ? shopId : this.listQuery.shopId,
					memberId: this.$route.query.memberId || ''
				};
				qryIncomeRecord(removePropertyOfNull(obj)).then(res => {
					if (res.code === 0) {
						const {
							list,
							total
						} = res.data.pageList
						console.log('res', res)
						this.list = list
						this.total = total
						this.dataCard = {
							...res.data,
							pageList: null
						}
					}
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageSize = val
				this.fetchData()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.fetchData()
			},
			handleClose() {
				let filtrList = ['cancelTable']
				let {
					query
				} = this.$route
				if (query?.orderNo && filtrList.indexOf(query?.from) != -1) {
					window.close()
					return
				}
				this.orderDetailVisible = false
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.labelText {
		color: rgb(115, 115, 115);
		font-size: 12px;
	}

	.common-container {
		// background: #fff;
		border-radius: 5px;
		padding: 20px;

		.dataCard {
			display: flex;

			/deep/.el-card {
				margin: 10px 10px 10px 0;
				min-width: 200px;

				.el-card__body {
					padding: 10px 20px;

					.title {
						border-left: 3px solid #ffb72f;
						padding-left: 5px;
					}

					.money {
						font-size: 20px;
						margin-top: 15px;
					}

					.content {
						margin-top: 15px;
						font-size: 12px;
					}
				}
			}
		}

		.dataList {
			background: #fff;
		}
	}
</style>
